<template>
    <div>
        <el-row>
            <el-col :span="8" align="left">
                <span>姓名：</span>
                <el-input placeholder="请输入姓名" v-model="salemanNameLike" clearable style="width:50%;"></el-input>
            </el-col>
            <el-col :span="8" align="left">
                <span>手机号：</span>
                <el-input placeholder="请输入联系电话" v-model="phoneNumber" clearable></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4" align="left">
                <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="12"></el-col>
            <el-col :span="4" align="right">
                <el-button type="warning" icon="el-icon-plus" @click="add">新增人员</el-button>
            </el-col>
            <el-col :span="4" align="right">
                <el-button type="success" @click="exports" :disabled="exportLoading" :loading="exportLoading">导出数据</el-button>
            </el-col>
        </el-row> 
        <el-table
              :data="table"
              v-loading="tableLoading"
              border
              stripe 
              size="small"
              height="500"
              style="width: 100%">
            <el-table-column
                label="工号"
                prop="jobNumber"
                align="center"
                fixed="left"
                width="120">
            </el-table-column>
            <el-table-column
                label="姓名"
                prop="salemanName"
                align="center"
                fixed="left"
                width="120">
            </el-table-column>
            <el-table-column
                label="性别"
                prop="sex"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="身份证"
                prop="idCard"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="手机号码"
                prop="phoneNumber"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="居住地址"
                prop="liveAddress"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="居住电话"
                prop="liveTelPhone"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="微信号"
                prop="wechatNumber"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="生日"
                prop="birthday"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="紧急联系人"
                prop="emergencyContact"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="紧急联系人电话"
                prop="emergencyContactPhone"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="是否在职"
                align="center"
                width="120">
                <template slot-scope="scope">
                    <span>{{scope.row.isLeave?'在职':'离职'}}</span>
                </template>
            </el-table-column> 
            <el-table-column
                label="入职时间"
                prop="entryDate"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="离职时间"
                prop="leaveTime"
                align="center"
                width="120">
            </el-table-column> 
            <el-table-column
                label="头像地址"
                prop="photoUrl"
                align="center"
                width="120">
            </el-table-column>  
            <!-- <el-table-column
                label="级别"
                prop="level"
                align="center"
                width="120">
            </el-table-column>   -->
            <el-table-column
                label="所属区"
                prop="area"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                label="区ID"
                prop="areaId"
                align="center"
                width="200">
            </el-table-column>  
            <el-table-column
                label="所属部门"
                prop="department"
                align="center"
                width="120">
            </el-table-column>  
            <el-table-column
                label="部门ID"
                prop="departmentId"
                align="center"
                width="120">
            </el-table-column>  
            <el-table-column
                label="所属组"
                prop="group"
                align="center"
                width="120">
            </el-table-column>  
            <el-table-column
                label="组ID"
                prop="groupId"
                align="center"
                width="120">
            </el-table-column>  
            <el-table-column
                label="所属部"
                prop="part"
                align="center"
                width="120">
            </el-table-column>
            <el-table-column
                label="部ID"
                prop="partId"
                align="center"
                width="120">
            </el-table-column>  
            <el-table-column
                label="其他特殊备注"
                prop="remark"
                align="center"
                :show-overflow-tooltip="true"
                width="200">
            </el-table-column>  
            <el-table-column
                fixed="right"
                align="center"
                label="操作"
                width="220">
                <template slot-scope="scope">
                  <el-button style="padding: 3px 4px 3px 4px;margin: 2px" type="warning"
                    size="mini" @click="edit(scope.row)">修改信息
                  </el-button>
                </template>
              </el-table-column>
        </el-table>
        <el-pagination
            background
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="totalCount"
            style="margin:50px;">
        </el-pagination>
        <div style="margin:30px 0;" class="fw">共{{Math.ceil(totalCount/pageSize)}}页,{{totalCount}}条信息</div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogShow" v-loading="dialogLoading" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="1100px">
            <el-form :model="form" :rules="rules" ref="form">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="服务人员姓名:"  prop='salemanName'>
                            <el-input v-model="form.salemanName" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="工号:"  prop='jobNumber'>
                            <el-input v-model="form.jobNumber" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="身份证:"  prop='idCard'>
                            <el-input v-model="form.idCard" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="性别:"  prop='sex'>
                            <el-select v-model="form.sex" placeholder="请选择">
                                <el-option
                                v-for="item in sexoptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="出生年月:"  prop='birthday'>
                            <el-date-picker
                            v-model="form.birthday"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="手机号:"  prop='phoneNumber'>
                            <el-input v-model="form.phoneNumber" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="入职时间:"  prop='entryDate'>
                            <el-date-picker
                            v-model="form.entryDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属部门:"  prop='departmentId'>
                            <el-select v-model="form.departmentId" placeholder="请选择">
                                <el-option
                                v-for="item in departmentoptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属组:"  prop='groupId'>
                            <el-select v-model="form.groupId" placeholder="请选择">
                                <el-option
                                v-for="item in groupoptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属部:"  prop='partId'>
                            <el-select v-model="form.partId" placeholder="请选择">
                                <el-option
                                v-for="item in partoptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属区:"  prop='areaId'>
                            <el-select v-model="form.areaId" placeholder="请选择">
                                <el-option
                                v-for="item in areaoptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否在职:" prop="isLeave">
                            <el-select v-model="form.isLeave" placeholder="请选择">
                                <el-option
                                v-for="item in isLeaveoptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="离职时间:">
                            <el-date-picker
                            v-model="form.leaveTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="8">
                        <el-form-item label="级别:">
                            <el-input v-model="form.level" clearable></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="8">
                        <el-form-item label="微信号:">
                            <el-input v-model="form.wechatNumber" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="头像地址:">
                            <el-input v-model="form.photoUrl" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="居住地址:">
                            <el-input v-model="form.liveAddress" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="居住电话:">
                            <el-input v-model="form.liveTelPhone" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="紧急联系人:">
                            <el-input v-model="form.emergencyContact" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="紧急联系人电话:">
                            <el-input v-model="form.emergencyContactPhone" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="其他特殊备注:">
                            <el-input v-model="form.remark" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="sure('form')">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
              </div>
        </el-dialog>
    </div>
</template>

<script>
var searchInfo={
    salemanNameLike:"",
    phoneNumber:"",
};
export default {
    data(){
        return{
            exportLoading:false,
            salemanNameLike:"",
            phoneNumber:"",
            tableLoading:false,
            table:[],
            currentPage: 1,
            pageSize: 20,
            totalCount: 0,
            dialogTitle:"",
            dialogShow:false,
            dialogLoading:false,
            form:{
                salemanName:"",
                jobNumber:"",
                idCard:"",
                sex:"",
                birthday:"",
                phoneNumber:"",
                entryDate:"",
                departmentId:"",
                groupId:"",
                partId:"",
                areaId:"",
                isLeave:"",
                leaveTime:"",
                level:"",
                wechatNumber:"",
                photoUrl:"",
                liveAddress:"",
                liveTelPhone:"",
                emergencyContact:"",
                emergencyContactPhone:"",
                remark:"",
            },
            rules: {
                salemanName: [{ required: true, message: "请输入服务人员姓名", trigger: "blur" }],
                jobNumber: [{ required: true, message: "请输入工号", trigger: "blur" }],
                idCard: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
                birthday: [{ required: true, message: "请选择生日", trigger: "blur" }],
                phoneNumber: [{ required: true, message: "请输入手机号", trigger: "blur" }],
                sex: [{ required: true, message: "请选择性别", trigger: "change" }],
                entryDate: [{ required: true, message: "请选择入职时间", trigger: "blur" }],
                departmentId: [{ required: true, message: "请选择所属部门", trigger: "change" }],
                groupId: [{ required: true, message: "请选择所属组", trigger: "change" }],
                partId: [{ required: true, message: "请选择所属部", trigger: "change" }],
                areaId: [{ required: true, message: "请选择所属区", trigger: "change" }],
                isLeave: [{ required: true, message: "请选择是否在职", trigger: "change" }],
            },
            sexoptions:[
                {
                    label:"男",
                    value:"男"
                },
                {
                    label:"女",
                    value:"女"
                },
            ],
            departmentoptions:[],
            groupoptions:[],
            partoptions:[],
            areaoptions:[],
            booloptions:[
                {
                    label:"是",
                    value:true  
                },
                {
                    label:"否",
                    value:false  
                },
            ],
            isLeaveoptions:[
                {
                    label:"在职",
                    value:true  
                },
                {
                    label:"离职",
                    value:false  
                },
            ],
        }
    },
    mounted(){
        this.initData()
        this.getRequest('/common/getDepartmentInfo').then(resp =>{
                if (resp && resp.data.status == 200){
                    this.departmentoptions=resp.data.obj.departmentList;
                    this.groupoptions=resp.data.obj.groupList;
                    this.partoptions=resp.data.obj.partList;
                    this.areaoptions=resp.data.obj.areList;
                }
        })
    },
    methods:{
        requestInfo(){
            this.tableLoading=true;
            this.postRequest("/saleman/manage", {
                salemanNameLike:this.salemanNameLike,
                phoneNumber:this.phoneNumber,
                pageIndex: this.currentPage,
                pageSize: this.pageSize
            })
            .then(resp => {  
                this.tableLoading=false;
                if (resp && resp.data.status == 200){
                    this.table=resp.data.obj.rows;
                    this.totalCount = resp.data.obj.total;
                    searchInfo={
                        salemanNameLike:this.salemanNameLike,
                        phoneNumber:this.phoneNumber,
                    }
                }
            });
        },
        initData(){
          this.requestInfo()
        },
        search(){
            this.currentPage = 1;
            this.requestInfo()
        },
        //列表当前页改变
        currentChange: function(currentChange) {
            this.currentPage = currentChange;
            this.requestInfo()
        },
        add(){
            this.formInit();
            this.dialogShow=true;
            this.dialogTitle="新增人员";
        },
        edit(item){
            this.formInit();
            this.dialogShow=true;
            this.dialogTitle="修改信息";
            this.form=item;
        },
        sure(form){
            console.log(this.form)
            this.$refs[form].validate(valid =>{
                if (valid){
                    this.dialogLoading=true;
                    // for(var i=0;i<this.areaoptions.length;i++){
                    //     if(this.form.area===this.areaoptions[i].value){
                    //         this.form.areaId=this.areaoptions[i].id;
                    //     }
                    // }
                    // for(var i=0;i<this.groupoptions.length;i++){
                    //     if(this.form.group===this.groupoptions[i].value){
                    //         this.form.groupId=this.groupoptions[i].id;
                    //     }
                    // }
                    // for(var i=0;i<this.partoptions.length;i++){
                    //     if(this.form.part===this.partoptions[i].value){
                    //         this.form.partId=this.partoptions[i].id;
                    //     }
                    // }
                    // for(var i=0;i<this.departmentoptions.length;i++){
                    //     if(this.form.department===this.departmentoptions[i].value){
                    //         this.form.departmentId=this.departmentoptions[i].id;
                    //     }
                    // }
                    //修改
                    if(this.form.salemanId){
                        this.putRequest("/saleman/update",this.form).then(resp =>{
                            this.dialogLoading=false;
                            if (resp && resp.data.status == 200){
                                this.dialogShow=false;
                                this.common.showToast("success","修改成功");
                                this.requestInfo();
                            }   
                        })
                    }else{
                        this.putRequest("/saleman/add",this.form).then(resp =>{
                            this.dialogLoading=false;
                            if (resp && resp.data.status == 200){ 
                                this.dialogShow=false;
                                this.common.showToast("success","新增成功");
                                this.requestInfo();
                            }
                        })
                    }
                }else {
                    return false;
                }
            })
        },
        cancel(){
            this.dialogShow=false;
            this.requestInfo();
        },
        formInit(){
            this.form={
                salemanName:"",
                jobNumber:"",
                idCard:"",
                sex:"",
                birthday:"",
                phoneNumber:"",
                entryDate:"",
                departmentId:"",
                groupId:"",
                partId:"",
                areaId:"",
                isLeave:"",
                leaveTime:"",
                level:"",
                wechatNumber:"",
                photoUrl:"",
                liveAddress:"",
                liveTelPhone:"",
                emergencyContact:"",
                emergencyContactPhone:"",
                remark:"",
            }
        },
        exports(){
            this.exportLoading=true;
            console.log(searchInfo)
            var address=`/saleman/export?salemanNameLike=${searchInfo.salemanNameLike}&&phoneNumber=${searchInfo.phoneNumber}`
            this.common.downloadFile(address);
            setTimeout(() => {
                this.exportLoading=false;
            }, 3000); 
        }
    }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 30px;
  height: 50px;
  line-height: 50px;
}
.el-col {
  height: 60px;
  line-height: 60px;
}
.el-input,.el-input__inner,.el-select,.el-date-editor{
    width: 50%;
}
</style>
